<script setup>
import {defineProps, ref} from 'vue'
import axios from 'axios'
import File from './File.vue'
import { updateStatus } from '../store/status.js';
import { watch } from 'vue'

let status = updateStatus()
const file = defineProps({
  fatherId: {
    type: Number,
    required: true
  },
  layer: {
    type: Number,
    default: 0
  }
})


var fileList = ref([]);
// 发起ajax请求获取文件信息
function getFileInfo() {
    axios.get(`http://localhost:8081/file/${file.fatherId}`)
        .then(response => {
            // 处理响应数据
            fileList.value = response.data.data;
        })
        .catch(error => {
            console.error('Error fetching file info:', error);
        });
}

watch(
  () => status.needfresh,
  () => {
    console.log('watcher triggered:', status.needfresh, status.reshId, file.fatherId);
    if (status.needfresh && status.reshId === file.fatherId) {
      // 如果需要刷新且父级ID匹配，则重新获取文件信息
      getFileInfo();
      status.needfresh = false; // 重置刷新状态
    }
  }
)

// 初始化结束后调用获取文件信息
getFileInfo();

</script>

<template>
<!-- 模仿文件管理器，显示一项文件名，创建日期，大小，类型，修改日期，权限，操作 -->
    <div class="file-list">

        <!-- 根据文件类型显示不同的图标 -->
        <File v-for="item in fileList" class="file-item" :file="item" :layer="layer+1"/>
    </div>
        
</template>

<style scoped>
/* 美化文件项 */
.file-item {
    position: relative;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f2f6fd;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #FFF;
    padding-left: 24px;
}

.file-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
</style>
